<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Clip Image transition</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Old+Standard+TT|Oranienbaum|Oswald:200,300,400" rel="stylesheet">
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> -->
<link href="https://cdn.bootcdn.net/ajax/libs/normalize/8.0.1/normalize.css" rel="stylesheet">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<nav class='nav'>
  <ul class='nav-links'>
    <li>HOME</li>
    <li>购买工程</li>
    <li>实例教程</li>
    <li>B站首页</li>
  </ul>
  <h1 class='nav-logo'></h1>
  <ul class='nav-lang'>
    <img src="./img/大标题.png" alt="">
    <h2>制作人：谌嘉诚</h2>
    <!-- <h1>DEATHLY STILLNESS</h1> -->
    <!-- <li>Sek</li>
    <li>Eur</li>
    <li>Usd</li> -->
  </ul>
</nav>
<div class='intro-wrapper'>
  <div class='centered'>
    <div class='square'></div>
  </div>
  <div class='centered'>
    <h1 class='intro-title'><span>c</span><span>&nbsp;j&nbsp;</span><span>c</span></h1>
  </div>
</div>
<div class='wrapper'>
  <div class='gallery'>
    <div class='gallery-background'>
      <div class='image-wrapper' id='wrapper-1'>
        <div class='image-clip middle'>
          <div class='image img-1'> </div>
        </div>
        <div class='image-clip top'>
          <div class='image img-1'> </div>
        </div>
        <div class='image-clip bottom'>
          <div class='image img-1'> </div>
        </div>
      </div>
      <div class='image-wrapper' id='wrapper-2'>
        <div class='image-clip middle'>
          <div class='image img-2'> </div>
        </div>
        <div class='image-clip top'>
          <div class='image img-2'> </div>
        </div>
        <div class='image-clip bottom'>
          <div class='image img-2'> </div>
        </div>
      </div>
      <div class='image-wrapper' id='wrapper-3'>
        <div class='image-clip middle'>
          <div class='image img-3'> </div>
        </div>
        <div class='image-clip top'>
          <div class='image img-3'> </div>
        </div>
        <div class='image-clip bottom'>
          <div class='image img-3'> </div>
        </div>
      </div>
      <div class='image-wrapper' id='wrapper-4'>
        <div class='image-clip middle'>
          <div class='image img-4'> </div>
        </div>
        <div class='image-clip top'>
          <div class='image img-4'> </div>
        </div>
        <div class='image-clip bottom'>
          <div class='image img-4'> </div>
        </div>
      </div>
      <div class='image-wrapper' id='wrapper-5'>
        <div class='image-clip middle'>
          <div class='image img-5'> </div>
        </div>
        <div class='image-clip top'>
          <div class='image img-5'> </div>
        </div>
        <div class='image-clip bottom'>
          <div class='image img-5'> </div>
        </div>
      </div>
      <div class='image-wrapper' id='wrapper-6'>
        <div class='image-clip middle'>
          <div class='image img-6'> </div>
        </div>
        <div class='image-clip top'>
          <div class='image img-6'> </div>
        </div>
        <div class='image-clip bottom'>
          <div class='image img-6'> </div>
        </div>
      </div>
    </div>
    <!-- <div class='gallery-content'>
      <div class='gallery-content-wrapper' id='content-1'>
        <h1 class='gallery-title'>Calm & Earthy</h1>
        <h1 class='gallery-subtitle'>Spring summer collection 2018</h1>
      </div>
      <div class='gallery-content-wrapper' id='content-2'>
        <h1 class='gallery-title'>NEXT & NEXT</h1>
        <h1 class='gallery-subtitle'>Spring summer collection 2018</h1>
      </div>
      <div class='gallery-content-wrapper' id='content-3'>
        <h1 class='gallery-title'>Calm & END</h1>
        <h1 class='gallery-subtitle'>Spring summer collection 2018</h1>
      </div>
      <div class='gallery-content-wrapper' id='content-4'>
        <h1 class='gallery-title'>Calm & Earthy</h1>
        <h1 class='gallery-subtitle'>Spring summer collection 2018</h1>
      </div>
      <div class='gallery-content-wrapper' id='content-5'>
        <h1 class='gallery-title'>Calm & Earthy</h1>
        <h1 class='gallery-subtitle'>Spring summer collection 2018</h1>
      </div>
      <div class='gallery-content-wrapper' id='content-6'>
        <h1 class='gallery-title'>Calm & Earthy</h1>
        <h1 class='gallery-subtitle'>Spring summer collection 2018</h1>
      </div>
    </div> -->
  </div>
  <div class="lf-content">
    <h3>Deathly Stillness</h3>
    <p class="describe">
      中文名《死寂》，这是2.0测试版本，总开发时长5天。<br>
      因为时间有限，游戏玩法很简单，就是消灭所有看到的僵尸。<br>
      2.0的版本子弹将不再是无限量，你需要搜集子弹，完成<br>
      击杀所有僵尸的任务。<br>
      制作者授权所有试玩的用户可以分享游戏试玩视频。<br>
      感谢您的试玩，能挑战成功算我输！
    </p>
    <div class="video">
      <video controls="" src=""></video>
    </div>
  </div>
  <!-- <div class='slider-ldn'>
    <h1><span>l</span><span>d</span><span>n</span></h1>
  </div>
  <div class='slider-nyc'>
    <h1><span>N</span><span>Y</span><span>C</span></h1>
  </div>
  <div class='slider-shop'>
    <h1>Shop now</h1>
  </div> -->
  <div class="play-btn" id="playFree" style="">
    免费试玩
  </div>
</div>
<div class="free-wrapper">
  <p class="title">请输入邮箱</p>
  <input type="text" placeholder="邮箱地址...">
  <button>确认</button>
  <img src="http://119.45.49.244:7001/public/img/close.png" class="close" alt="">
</div>
<!-- partial --> 
<!-- <script src='https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.js'></script>  -->
<script src="https://cdn.bootcdn.net/ajax/libs/animejs/2.2.0/anime.js"></script>
<!-- <script src='https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.js'></script> -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/sweetalert/2.0.0/sweetalert.min.js"></script>
<script  src="./script.js"></script>
<script>

    // alert($)
    // window.onload = function(){
      // var img = new Image()
      // img.src = 'http://119.45.49.244:7001/public/img/背景图.jpg'
      // var box = document.createElement('div')
      // box.class = 'loading'
      // box.style = 'width:100%;height:100%;position:absolute;display:flex;align-items:center;justify-content:center;z-index:9999;color:#333;background:#fff;transform:translateY(0%);transition:.5s;'
      // box.innerHTML='<div class="loading"><span></span><span></span><span></span><span></span><span></span></div>'
      // document.body.append(box)
      // var flag = false;
      // img.onload = function(){
      //   setTimeout(()=>{
      //     box.style.transform = 'translateY(-100%)'
      //     // $(box).fadeOut()
      //     // $('.lf,.rt').addClass('show')
      //     $('.lf,.rt').addClass('show')
      //     $('body').addClass('load')
      //   },600)
      // }

      var flag = false;

      $('#playFree').click(function(){
        $('.free-wrapper').addClass('show')

      })
      $('.free-wrapper .close').click(function(){
        closeWrapper()
      })

      $('.free-wrapper button').click(function(){
        console.log(123);
        getData()
        
      })
      
      $('.free-wrapper').keyup(function(e){
        if(e.key=='Enter'){
          getData()
        }
      })

      function getData(){
        if(flag==false){
          flag = true
          if($('input').val().includes('@')){
            $.post('http://119.45.49.244:7001/email',{email:$('input').val()},function(res){
              if(res.errCode==0){
                flag = false
                swal({
                  title: "Good job!",
                  text: res.errMsg,
                  icon: "success",
                  button: "好的",
                  // timer: 1200,
                }).then(function(){
                  $('.free-wrapper').removeClass('show')
                })
              }else{
                flag = false
                swal({
                  title: '提示',
                  text: res.errMsg,
                  icon: "error",
                  button: '好的'
                })
              }
            })
          }else{
            flag = false
            alert('请输入正确邮箱号')
          }
        }else{
          return
        }
        
      }

      function closeWrapper(){
        $('.free-wrapper').removeClass('show')
      }
    // }
  
</script>
</body>
</html>